<template>
  <div class="wrap">
		<div forum-content>
			<div class="input">
				<input type="text" v-model="title" placeholder="昵称">
			</div>
			<div class="input">
				<textarea name="" id="" cols="20" rows="6" v-model="content" placeholder="留言内容"></textarea>
			</div>
			<span class="setforum-btn" @click="setforum">发布留言</span>
		</div>
		<bottom></bottom>
  </div>
</template>

<script>
import bottom from './bottom'
export default {
	components: {
     bottom
  },
  data () {
    return {
			title: '',
			content: ''
    }
  },
  methods: {
		setforum: function () {
			var that = this
			if (that.title === '') {
				that.$axios.messageTwo('昵称不能为空', '提示')
				return false
			}
			if (that.content === '') {
				that.$axios.messageTwo('留言内容不能为空', '提示')
				return false
			}
			that.$axios.request('post','/page/comment', {
				nickname: that.title,
				content: that.content
			})
				.then((res) => {
					if(res.status === 'success') {
						that.$axios.alert('留言成功', function() {
							that.$router.push({
								name: 'forum'
							})
						})
					} else {
						that.$axios.messageTwo(res.msg, '提示')
					}
				})
		}
  }
}
</script>

<style>
	.input{
		margin: 30px;
		border-bottom: #dbdbdb solid 1px;
	}
	.input input{
		width: 100%;
		height: 74px;
		line-height: 40px;
		border:none;
		outline: none;
		font-size: 26px;
		color: #646464;
	}
	.input textarea{
		width: 100%;
		line-height: 40px;
		border:none;
		outline: none;
		font-size: 26px;
		color: #646464;
	}
	.setforum-btn{
		display: block;
		height: 84px;
		margin: 30px;
		background: #0391FF;
		font-size: 26px;
		color: #fff;
		text-align: center;
		line-height: 84px;
		border-radius: 5px;
	}
	.file-box{
		margin-left: 30px;
		position: relative;
		width: 146px;
		height: 100px;
		border-radius: 5px;
		overflow: hidden;
	}
	.file-box span{
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #f2f2f2;
		z-index: 2;
		font-size: 20px;
		color: #8c8c8c;
		text-align: center;
	}
	.file-box span>i{
		display: block;
		margin: 15px 0 8px 0;
		font-size: 40px;
	}
	.file-box input{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #fafafa;
		z-index: 3;
		opacity: 0;
	}
</style>
